import { Grid } from '@shared/ui/Grid'
import { Skeleton } from '@shared/ui/Skeleton'
import styles from './ProjectCardSkeleton.module.scss'

export const ProjectCardSkeleton = () => {
  const skeletonCount = 4

  const renderAvatars = () => {
    const avatars = []
    for (let i = 0; i < skeletonCount; i++) {
      avatars.push(<Skeleton height='30px' key={i} radius='50%' width='30px' />)
    }
    return avatars
  }

  return (
    <Grid className={styles.skeleton}>
      <div className={styles.header}>
        <Skeleton height='32px' radius='8px' width='168px' />
      </div>
      <div>
        <Skeleton height='90px' radius='8px' width='168px' />
      </div>
      <div className={styles.avatars}>{renderAvatars()}</div>
    </Grid>
  )
}
